<extend name="template/base_top" />
<block name="area_header">

</block>
<block name="area_body">
    <style type="text/css">
        .cart-tool {
            margin-bottom:50px;
        }
        .product-box {
            background-color: white;
            margin-top:10px;
        }
        .product-li {
            position:relative;
            padding-top:10px;
            padding-bottom:10px;
            border-top:1px solid #eee;
        }
        .radio-box {
            position: absolute;
            left: 2%;
            top: 50%;
            margin-top: -12px;
        }
        .img-box {
            display: inline-block;
            width:18%;
            margin-left:8%;
            border:1px solid #DADADA;
            padding:2px;
        }
        .product-detail {
            display: inline-block;
            width:44%;
        }
        .product-pd {
            display: inline-block;
            width:25%;
            font-size: 18px;
        }
        .price-color {
            color:#FF5005;
        }
        .am-text-truncate {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        .sku_des {
            font-size: 14px;
            color:#999;
        }
        .price-box {
            margin-left:10px;
            display: inline-block;
        }
        .quantity-box {
            margin-top:10px;
            font-size:12px;
            display:block;
        }
        .am-icon-plus {
            color:#FF5005 !important;
            font-weight: 100 !important;
        }
        .reckon-box {
            margin-bottom: 50px;
            background-color: white;
            padding-top:20px;
            padding-bottom:20px;
        }
        .reckon-box .am-u-sm-6 {
            padding:0 !important;
        }
        .allprice-color {
            margin-left:10px;
            color:#FF9C03;
            font-size:16px;
        }

    </style>
    <div class="product-box">
        <form method="post" action="{:U('Order/cart_checkout')}" name="productid">
            <volist name="list" id="vo">
                <div class="product-li">
                    <div class="radio-box">
                        <input type="checkbox" name="id[]" value="{$vo.id}" data-val="{$vo['vipprice']}">
                    </div>
                    <div class="img-box am-vertical-align-middle">
                        <img src="{$vo.icon_url}" width="100%">
                    </div>
                    <div class="product-detail am-vertical-align-middle">
                        <div style="margin-bottom: 10px;">
                            <p class="am-text-truncate" >{$vo.name}</p>
                            <p class="am-text-truncate sku_des">规格：{$vo['sku_desc']}</p>
                        </div>
                        <div style="overflow:hidden;">
                            <button type="button" class="am-btn am-btn-default am-btn-xs" style="float:left" onClick="subtractQty(this);" ><i class="am-icon-minus"></i></button>
                            <input type="number" name="txtQty"  class="am-form-field txt-qty am-text-center am-text-sm" value="1" style=" width:60px; margin-right:0px; height:28px; display:inline; float:left">
                            <button type="button" class="am-btn am-btn-default am-btn-xs" style="float:left" onClick="addQty(this);"><i class="am-icon-plus"></i></button>
                        </div>
                    </div>
                    <div class="product-pd am-vertical-align-middle am-text-center">
                        ￥<span class="price-color">{$vo['vipprice']}</span>
                        <button type="button" data-val="{$vo.id}" class="delete-botton am-btn am-btn-danger am-btn-xs" style="display: block;margin:0 auto" >删除</button>
                        <p class="quantity-box">库存：<span class="quantity-num">{$vo.quantity}</span></p>
                    </div>
                </div>
            </volist>
        </form>

    </div>
    <div class="reckon-box am-g">
        <div class="am-u-sm-9">
            <span class="allprice-color">总价：0元</span>
        </div>
        <div class="am-u-sm-3">
            <button class="am-btn am-btn-warning am-btn-xs" onclick="validate()">去结账</button>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            $('.delete-botton').bind('click', function () {
                var id = $(this).attr('data-val');
                var deletehtml = this;
                $.post("{:U('ShoppingCart/delete')}", {id: id}, function (res) {
                    if (res['status']) {
                        $(deletehtml).parents('.product-li').remove();
                    }
                });
            });

            /*
             * 绑定一下复选框 点击事件
             * */
            $("[name='id[]']").bind('click',function(){
                trends_price();
            });

            /*
             * 输入框失去焦点的时候
             * */
            $('.txt-qty').bind('blur',function(){
                var num = $(this).val();

                var quantity = parseInt($(this).parents('.product-li').find('.quantity-num').text());
                console.log(quantity);
                var val = $(this).parents('.product-li').find("[name='id[]']").val();
                if(quantity < num){
                    $('#my-alert .am-modal-bd').text('商品库存不足');
                    $('#my-alert').modal();
                    $(this).val(quantity);
                    if(val.indexOf('###') > 0){
                        val = val.substr(0, val.indexOf('###'));
                    }
                    val = val+'###'+quantity;
                    $(this).parents('.product-li').find("[name='id[]']").val(val);

                }else{
                    if(val.indexOf('###') > 0){
                        val = val.substr(0, val.indexOf('###'));
                    }

                    val = val+'###'+num;
                    $(this).parents('.product-li').find("[name='id[]']").val(val);
                }
                trends_price();
            });


        });

        /*
        * 判断库存
        * */
        function judge(a){
            var num = $(a).val();

            var quantity = parseInt($(a).parents('.product-li').find('.quantity-num').text());
            console.log(quantity);
            var val = $(a).parents('.product-li').find("[name='id[]']").val();
            if(quantity < num){
                $('#my-alert .am-modal-bd').text('商品库存不足');
                $('#my-alert').modal();
                $(a).val(quantity);
                if(val.indexOf('###') > 0){
                    val = val.substr(0, val.indexOf('###'));
                }
                val = val+'###'+quantity;
                $(a).parents('.product-li').find("[name='id[]']").val(val);

            }else{
                if(val.indexOf('###') > 0){
                    val = val.substr(0, val.indexOf('###'));
                }

                val = val+'###'+num;
                $(a).parents('.product-li').find("[name='id[]']").val(val);
            }
        }

        /*
        * 动态调整总价
        * */
        function trends_price(){
            var totalprice = 0;
            var totalnum = 0;
            $("[name='id[]']:checked").each(function(){
                var price = parseFloat($(this).attr('data-val'));
                var num = parseInt($(this).parents('.product-li').find('.txt-qty').val());
                var val = $(this).val();
                if(val.indexOf('###') > 0){
                    val = val.substr(0, val.indexOf('###'));
                    console.log(val);
                }

                val = val+'###'+num;
                $(this).val(val);
                totalprice = totalprice + price*num;
                totalnum = totalnum + num;
            });

            $('.allprice-color').text('总价：￥'+totalprice+'元 共'+totalnum+'件');
        }



        /*
         * 校验表单数据
         * */
        function validate(){
            $("[name='id[]']:checked").each(function(){
                var val = $(this).val();
                if(val.indexOf('###') < 0){
                    $(this).attr('checked',false);
                }

            });

            var count = $("[name='id[]']:checked").length;
            if(count > 0){
                $("[name='productid']").submit();
            }else{
                $('#my-alert .am-modal-bd').text('请选择要结算的商品');
                $('#my-alert').modal();
            }
        }

        /*返回上一页*/
        function goback(){
            history.go(-1);
        }



        function checkIsInteger(str)
        {
            //如果为空，则通过校验
            if(str == "")
                return true;
            if(/^(\-?)(\d+)$/.test(str))
                return true;
            else
                return false;
        }
        var errordialog=function(c){
            alert(c)
        }


        //检验商品数量
        function checkCounts(id) {
            var Counts = id.val();

            if (Counts == "") {
                errordialog("请填写数量!");
                return false;
            }
            else if (!checkIsInteger(Counts)) {
                errordialog("商品数量不是整数!");
                return false;
            }
            else if (Counts < 1) {
                errordialog("商品数量不能小于1!");
                return false;
            }
            else {
                return true;
            }
        }
        function addQty(b){

            var brother = $(b).prev();
            checkCounts(brother);
            var qty = parseInt($(b).prev().val());
            console.log(qty);
            $(b).prev().val(qty+1);
            judge(brother);
            trends_price()
        }
        function subtractQty(b){
            var brother = $(b).next();
            checkCounts(brother);
            var qty = parseInt(brother.val());
            if(qty <=1){
                errordialog("商品数量不能小于1");
                return;
            }
            brother.val(qty-1);
            judge(brother);
            trends_price()
        }




    </script>

    <div class="am-modal am-modal-alert am-modal-active" tabindex="-1" id="my-alert" style="display: none;">
        <div class="am-modal-dialog"><div class="am-modal-hd">系统提示</div>
            <div class="am-modal-bd">请选择需要结算的商品</div>
            <div class="am-modal-footer"><span class="am-modal-btn am-modal-btn-bold">确定</span></div>
        </div>
    </div>
</block>